<template>
    <div class="manage">
        <div class="box_manage">
            <Header title="房屋管理" >
                <img class="left" @click="back" src="../assets/turn.png" alt="">
            </Header>
            <loading  v-if="isflag" />
            <div class="box_wrapper">
                <div class="box_flex" v-for="(item,index) in list" :key="index">
                    <p>{{item.cellName}}{{item.unitName}}</p>
                    <p class="box_one" @click="state(item.id)">管理</p>
                    <p class="box_two" @click="delet(item.id)">删除</p>
                </div>
            </div>
            <div class="box_footer">
                <div class="box_absolu">
                    <img src="../assets/icon_list2@2x.png">
                    <router-link tag="p" to="/cell" class="die_one">{{quarters}}</router-link>
                    <p class="die_two" @click="units">{{username}}</p>
                    <p class="die_sum">添加</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import { handle, getrid } from '../old_request'
import { Toast,MessageBox  } from "mint-ui";
export default {
    data(){
        return {
            quarters:'',
            list:[],
            username:'',
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();
        },
        units(){
            this.$router.push('/units');
        },
        state(unitid){
            this.$router.push({
                name:'state',
                params:{unitid:unitid}
            })
        },
        delet(id){
            let that = this;
            MessageBox({
                message:'是否删除该房屋?',
                showCancelButton: true,
                confirmButtonText:"确定",
                cancelButtonText:"取消"
            }).then( (res) => {
                //console.log(res)
                if(res === 'confirm'){
                    let data = {
                        "sign":that.$md5(`${that.wrapper.globalData()}id=${id}timestamp=${that.wrapper.gettime()}`),
                        "timestamp":that.wrapper.gettime(),
                        "id":id,
                        "mobile":that.wrapper.getlocalstoage('mobile')
                    }
                    getrid(data,that).then( (res) => {
                        //console.log(res)
                        if(res.code === 0){
                            Toast({
                                message: "删除成功",
                                iconClass: "iconfont icon-success_no_circle",
                                duration: 1500
                            });
                            
                            that.list.map( (item,index) => {
                                if(that.list[index].id !== id){
                                    that.List();
                                }
                            })
                        }else{
                            Toast({
                                message: "此房间内有住户",
                                iconClass: "iconfont icon-cuowu",
                                duration: 1500
                            });
                        }
                    })
                }
            })
        },
        List(){
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}blockId=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "blockId":that.$store.state.blockid,
                "userId":that.$store.state.userid,
                "cellId":that.$store.state.unitsid,
                "pageNo":1,
                "pageSize":10
            }
            handle(data,that).then( (res) => {
                // console.log(res)
                if(res.code === 0){
                    that.list = res.data;
                    that.isflag = false;
                }
            })
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        if(that.$store.state.unit){
            that.quarters = that.$store.state.unit;
        }
        if(that.$store.state.username){
            // console.log(that.$store.state.username)
            that.username = that.$store.state.username;
        }else{
            that.username = '全部'
        } 
        that.List();        //进入页面请求数据
    }
}
</script>

<style scoped>
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_manage::before{
        content: ' ';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #EFEFF4;
        background-size: 100% auto;
    }
    .manage{
        margin-top: 50px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background:#EFEFF4;
        /* padding: 10px 0; */
    }
    .box_flex{
        display: flex;
        width: 95%;
        height: 45px;
        line-height: 45px;
        background: white;
        margin: 10px auto;
        padding: 0px 3%;
        box-sizing: border-box;
        position: relative;
    }
    .box_flex .box_one{
        width: 60px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: white;
        border-radius: 50px;
        background: #00ADE1;
        margin-top:11px;
        font-size: 13px;
        position: absolute;
        right: 85px;
    }
    .box_flex .box_two{
        width: 60px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: white;
        border-radius: 50px;
        background: #c0000f;
        font-size: 13px;
        margin-top: 11px;
        position: absolute;
        right: 15px;
    }
    /* 底部导航 */
    .box_footer{
        position: fixed;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
    }
    .box_footer .box_absolu{
        position: relative;
    }
    .box_footer .box_absolu img{
        height: 46px;
    }
    .box_absolu .die_one{
        position: absolute;
        top: 12px;
        left: 59px;
        width: 94px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .box_absolu .die_two{
        position: absolute;
        top: 12px;
        left: 180px;
        width: 54px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .box_absolu .die_sum{
        position: absolute;
        top: 12px;
        right: 23px;
    }
</style>